<script type="text/javascript" src="resources/node-red-contrib-knx-ultimate/11f26b4500.js"></script>

<script type="text/javascript" src="resources/node-red-contrib-knx-ultimate/htmlUtils.js"></script>

<script type="text/javascript">
    RED.nodes.registerType('knxUltimateHueTapDial', {
        category: "KNX Ultimate",
        color: '#C0C7E9',
        defaults: {
            //buttonState: {value: true},
            server: { type: "knxUltimate-config", required: false },
            serverHue: { type: "hue-config", required: true },
            name: { value: "" },

            namerepeat: { value: "" },
            GArepeat: { value: "" },
            dptrepeat: { value: "" },

            hueDevice: { value: "" }
        },
        inputs: 0,
        outputs: 1,
        icon: "node-hue-icon.svg",
        label: function () {
            return (this.name);
        },
        paletteLabel: "Hue Tap Dial",
        // button: {
        //     enabled: function() {
        //         // return whether or not the button is enabled, based on the current
        //         // configuration of the node
        //         return !this.changed
        //     },
        //     visible: function() {
        //         // return whether or not the button is visible, based on the current
        //         // configuration of the node
        //         return this.hasButton
        //     },
        //     //toggle: "buttonState",
        //     onclick: function() {}
        // },
        oneditprepare: function () {
            // Go to the help panel
            try {
                RED.sidebar.show("help");
            } catch (error) { }

            var node = this;
            var oNodeServer = RED.nodes.node($("#node-input-server").val()); // Store the config-node
            var oNodeServerHue = RED.nodes.node($("#node-input-serverHue").val()); // Store the config-node

            // 19/02/2020 Used to get the server sooner als deploy.
            $("#node-input-server").change(function () {
                try {
                    oNodeServer = RED.nodes.node($(this).val());
                } catch (error) { }
            });
            // 19/02/2020 Used to get the server sooner als deploy.
            $("#node-input-serverHue").change(function () {
                try {
                    oNodeServerHue = RED.nodes.node($(this).val());
                } catch (error) { }
            });




            // DPT repeat
            // ########################
            $.getJSON('knxUltimateDpts?serverId=' + $("#node-input-server").val(), (data) => {
                data.forEach(dpt => {
                    if (dpt.value.startsWith("3.007") || dpt.value.startsWith("5.001") || dpt.value.startsWith("232.600")) {
                        $("#node-input-dptrepeat").append($("<option></option>")
                            .attr("value", dpt.value)
                            .text(dpt.text))
                    }
                });

                $("#node-input-dptrepeat").val(this.dptrepeat)
            })

            // Autocomplete suggestion with ETS csv File
            $("#node-input-GArepeat").autocomplete({
                minLength: 0,
                source: function (request, response) {
                    $.getJSON("knxUltimatecsv?nodeID=" + oNodeServer.id, (data) => {
                        response($.map(data, function (value, key) {
                            var sSearch = (value.ga + " (" + value.devicename + ") DPT" + value.dpt);
                            if (htmlUtilsfullCSVSearch(sSearch, request.term)) {
                                if (value.dpt.startsWith('5.001') || value.dpt.startsWith('3.007') || value.dpt.startsWith("232.600")) {
                                    return {
                                        label: value.ga + " # " + value.devicename + " # " + value.dpt, // Label for Display
                                        value: value.ga // Value
                                    }
                                } else { return null; }
                            } else {
                                return null;
                            }
                        }));
                    });
                }, select: function (event, ui) {
                    // Sets Datapoint and device name automatically
                    var sDevName = ui.item.label.split("#")[1].trim();
                    try {
                        sDevName = sDevName.substr(sDevName.indexOf(")") + 1).trim();
                    } catch (error) {
                    }
                    $('#node-input-namerepeat').val(sDevName);
                    var optVal = $("#node-input-dptrepeat option:contains('" + ui.item.label.split("#")[2].trim() + "')").attr('value');
                    // Select the option value 
                    $("#node-input-dptrepeat").val(optVal);
                }
            }).focus(function () {
                $(this).autocomplete('search', $(this).val() + 'exactmatch');
            });




            // Autocomplete suggestion with HUE
            $("#node-input-name").autocomplete({
                minLength: 0,
                source: function (request, response) {
                    $.getJSON("KNXUltimateGetResourcesHUE?rtype=relative_rotary&serverId=" + oNodeServerHue.id, (data) => {
                        response($.map(data.devices, function (value, key) {
                            //alert(JSON.stringify(value) + " "+ key)
                            var sSearch = (value.name);
                            if (htmlUtilsfullCSVSearch(sSearch, request.term)) {
                                return {
                                    hueDevice: value.id, // Label for Display
                                    value: value.name // Value
                                }
                            } else {
                                return null;
                            }
                        }));
                    });
                }, select: function (event, ui) {
                    // Sets the fields
                    $('#node-input-hueDevice').val(ui.item.hueDevice);
                }
            }).focus(function () {
                $(this).autocomplete('search', $(this).val() + 'exactmatch');
            });


            // ########################


        },
        oneditsave: function () {
            // Return to the info tab
            try {
                RED.sidebar.show("info");
            } catch (error) { }



        },
        oneditcancel: function () {
            // Return to the info tab
            try {
                RED.sidebar.show("info");
            } catch (error) { }


        }
    })

</script>

<script type="text/html" data-template-name="knxUltimateHueTapDial">


<div class="form-row">
    <b>HUE Tap Dial node (rotary)</b>&nbsp&nbsp<span style="color:red"
    &nbsp<i class="fa fa-youtube"></i></span>&nbsp<a target="_blank" href="https://youtu.be/jjEUI1J8bkA"><u>Youtube sample</u></a>
    <br />
    <br />
    <p align="center">
       <i class="fa-solid fa-circle-notch fa-spin fa-4x"></i>
    </p>
    <br />
    <label for="node-input-server" >
        <img src=""></img>
        KNX GW
    </label>
    <input type="text" id="node-input-server" />
</div>

<div class="form-row">
    <label for="node-input-serverHue">
        <img src="data:image/png;base64, iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAAXNSR0IArs4c6QAAAERlWElmTU0AKgAAAAgAAYdpAAQAAAABAAAAGgAAAAAAA6ABAAMAAAABAAEAAKACAAQAAAABAAAAEKADAAQAAAABAAAAEAAAAAA0VXHyAAABFUlEQVQ4EZWSsWoCQRCG1yiENEFEi6QSkjqWWoqFoBYJ+Br6JHkMn8Iibd4ihQpaJIhWNkry/ZtdGZY78Qa+m39nZ+dm9s4550awglNBluS/gVtAX6KgDclf68w2OThgfR9iT/jnoEv4TtByDThWTCDKW4SSZTf/zj9/eZbN+izTDuKGimu0vPF8B/YN8aC8LmcOj/AAn9CFTEs70Js/oGqy79C69bqJ5XbQI2kGO5N8QL9D08S8zBtBF5ZaVsznpCMoqJnVdjTpb1Db0fwIWmQV6BLXzFOYgA6/gDVfQN9bBWp2J2hdWDPoBV5FrKnAJutHikk/CHHR8i7x4iG7qQ720IYvu3GFbpHjx3pFrOFYkA354z/5bkK826phyAAAAABJRU5ErkJggg=="/>
        HUE Bridge
    </label>
    <input type="text" id="node-input-serverHue" />
</div>

<br/>
<p>
<b>Philips HUE</b>
</p>
    
<div class="form-row">
    <label for="node-input-hueDevice" >
        <i class="fa fa-play-circle"></i>&nbspHue Device</label>
        <input type="text" id="node-input-name" placeholder="Enter your hue device name" />
    <input type="hidden" id="node-input-hueDevice" />
</div>

<br/>

<p>
    <b>KNX</b>
</p>

    <div class="form-row">
        <label for="node-input-namerepeat" style="width:100px;"><i class="fa fa-play-circle-o"></i> Rotate</span></label>

        <label for="node-input-GArepeat" style="width:20px;">GA</label>
        <input type="text" id="node-input-GArepeat" placeholder="Ex: 1/1/1" style="width:70px;margin-left: 5px; text-align: left;">
       
        <label for="node-input-dptrepeat" style="width:40px; margin-left: 0px; text-align: right;">DPT</label>
        <select id="node-input-dptrepeat" style="width:140px;"></select>
       
        <label for="node-input-namerepeat" style="width:50px; margin-left: 0px; text-align: right;">Name</label>
        <input type="text" id="node-input-namerepeat" style="width:200px;margin-left: 5px; text-align: left;">
    </div>
    
<br/>
<br/>
<br/>


</script>

<script type="text/markdown" data-help-name="knxUltimateHueTapDial">
<p>This node lets you get the events from your HUE rotary device, for example the Tap Dial.</p>

The Tap Dial device has 4 buttons and 1 rotary knob.  
You can find the 4 buttons in the **Hue Button node**, not here!  
The rotary service of the Tap Dial, can send a DIM (Datapoint 3.007), absolute brightness (Datapoint 5.001) to the KNX bus,  
or a random color (Datapoint 232.600) to the selected group address.

**General**
|Property|Description|
|--|--|
| KNX GW | Select the KNX gateway to be used |
| HUE Bridge | Select the HUE Bridge to be used |
| Hue Button | HUE button to be used. The avaiable buttons start showing up while you're typing.|

<br/>

|Property|Description|
|--|--|
| Rotate | This command is used either to send DIM (increase/decrease), aboslute brightness, or a random color, depending on the selected datapoint. If the random color (datapoint 232.600) is selected, **clockwise rotation** changes random colors and **counterclockwise rotation** set the light to **white** |

### Outputs

1. Standard output
: payload (string|object) : the standard output of the command.

### Details

`msg.payload` is used as the payload of the published message.
If it contains an Object it will be converted to a JSON string before being sent.  
It contains the detailed event sent by your Hue devicem so you can use it for whatever you want.



    </script>